<template>
    <div class="panel">
        <el-collapse v-model="collapseIndex" :accordion="false">
            <el-collapse-item title="基础设置" :name="1">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="元素类型">
                        <el-input size="mini" :value="element.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="音乐地址">
                        <el-input size="mini" v-model="element.music" clearable></el-input>
                        <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept="audio/*">
                        <el-button size="mini" @click="triggerFileSelect">上传音频</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="排版设置" :name="2">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="上边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左边距">
                        <el-input size="mini" type="number" v-model="element.styleObj.left"></el-input>
                    </el-form-item>
                    <el-form-item label="旋转角度">
                        <el-slider :min="0" :max="360" v-model="element.styleObj.angel"></el-slider>
                        <el-input-number 
                            size="mini" 
                            v-model="element.styleObj.angel" 
                            :min="0" 
                            :max="360" 
                            :step="1"
                            controls-position="right"
                            style="width: 100%">
                        </el-input-number>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="属性设置" :name="3">
                <el-form size="mini" label-width="80px">
                    <el-form-item label="图标颜色">
                        <el-color-picker v-model="element.styleObj.color" size="mini"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="自动播放">
                        <el-radio-group v-model="element.autoplay">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
    name: 'w-music-ctrl',
    props: {
        element: Object
    },
    data() {
        return {
            collapseIndex: 1
        }
    },
    methods: {
        triggerFileSelect() {
            // 阻止事件冒泡，防止触发画布的选中事件
            event.stopPropagation();
            this.$refs.fileInput.click();
        },
        
        handleFileSelect(event) {
            // 阻止事件冒泡，防止触发画布的选中事件
            event.stopPropagation();
            
            const file = event.target.files[0];
            if (file) {
                // 检查文件扩展名
                const ext = file.name.split('.').pop().toLowerCase();
                const allowedExts = ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a', 'wma'];
                if (!allowedExts.includes(ext)) {
                    this.$message.error('不支持的音频格式，请上传音频文件');
                    event.target.value = '';
                    return;
                }
                
                // 创建FormData对象
                const formData = new FormData();
                formData.append('file', file);
                
                // 发送上传请求
                fetch('/php/upload-music.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        // 更新音乐地址
                        this.element.music = data.url;
                        this.$message.success('音频上传成功');
                    } else {
                        this.$message.error(data.message || '上传失败');
                    }
                })
                .catch(error => {
                    console.error('上传失败:', error);
                    this.$message.error('上传失败，请稍后重试');
                });
            }
            
            // 清空input的value，确保下次选择同一文件也能触发change事件
            event.target.value = '';
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/variables";
</style>